<template>
	<view class="main">
		<view class="box" v-if="dizhilist.length !== 0">
			<view class="list" v-for="(item,index) in dizhilist" @click="xuandizhi(item)">
				<view class="info">
					<view class="info1">
						<view class="name">{{item.lianxiren}}</view>
						<view class="mobile">{{item.shoujihao}}</view>
					</view>
					<view class="address">{{item.sheng}} {{item.shi}} {{item.qu}} {{item.dizhi}}</view>
				</view>
				<view class="caozuo">
					<view @click.stop="edit(item)">编辑</view>
					<view @click.stop="addressremove(item)">删除</view>
				</view>
			</view>
		</view>
		
		<view class="" style="padding-top: 50rpx;" v-if="dizhilist.length == 0" >
			<u-empty  mode="list" text="暂无数据"
				marginTop="0">
			</u-empty>
		</view>
		<!-- 	<navigator url="/pages/address/add_address" hover-class="none"> -->
		<view style="display: flex;width: 60%;background-color: blue;padding: 20rpx;border-radius: 20rpx;color:white;justify-content: center; " @click="goaddress">
			新增收货地址
		</view>
		<!-- 添加或修改地址弹窗   -->
			<model v-if='show1' @colseModel='show1 = false'>
				<view style="display: flex;height: 100rpx;align-items: center; border-bottom-style: solid;border-bottom-width: 2rpx;border-bottom-color: #eee;">
					<view style="display: flex;flex: 1;margin-right: 20rpx;">
						联系人
					</view>
					<view  style="display: flex;flex: 4;">
						<input type="text" v-model="lianxiren" placeholder="请填写联系人姓名" />
					</view>
				</view>
				<view style="display: flex;height: 100rpx;align-items: center; border-bottom-style: solid;border-bottom-width: 2rpx;border-bottom-color: #eee;">
					<view style="display: flex;flex: 1;margin-right: 20rpx;">
						手机号
					</view>
					<view  style="display: flex;flex: 4;">
						<input type="number" v-model="shoujihao" placeholder="请填写手机号" />
					</view>
				</view>
				<view style="display: flex;height: 100rpx;align-items: center; border-bottom-style: solid;border-bottom-width: 2rpx;border-bottom-color: #eee;">
					<view style="display: flex;flex: 1;margin-right: 20rpx;">
						所在地区
					</view>
					<view  style="display: flex;flex: 4;">
						<AddressPicker style="width: 80%;" @change="change" :level="3">{{shengshiqu}} </AddressPicker>
					</view>
				</view>
				<view style="display: flex;align-items: center;align-items: center;margin-top: 10rpx; ">
					<view style="display: flex;flex: 1;margin-right: 20rpx;">
						详细地址
					</view>
					<view  style="display: flex;flex: 4;align-items: center;">
						<!-- <textarea  v-model="dizhi" placeholder="街道\楼牌号"  rows="2"></textarea> -->
						<u--textarea border="none" autoHeight height="30" v-model="dizhi" placeholder="街道\楼牌号" ></u--textarea>
					</view>
				</view>
				<view style="display: flex;width: 80%;justify-content: space-around;margin: 30rpx auto 0 auto;color: white;">
					<view style="display: flex;background-color: #0080FF;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="baocundizhi">{{shu1}}</view>
					<view style="display: flex;background-color: #0080FF;border-radius: 15rpx;padding: 20rpx 60rpx;" @click="show1 = false">取消</view>
				</view>
			</model>
	</view>
</template>

<script>
	import AddressPicker from "@/components/AddressPicker/AddressPicker.vue" 
	import model from '../../components/model.vue'
	export default {
		components:{
			AddressPicker,
			model
			},
		data() {
			return {
				shu1:'',//判断是新增还是修改地址
				shengshiqu:'请选择地址',
				lianxiren:'',
				shoujihao:'',
				dizhilist: [],
				options: {},
				show1:false,
				sheng:'',
				shi:'',
				qu:'',
				dizhi:'',
				dizhi_id:''
			}
		},
		onLoad(options) {
			this.options=options
		},
		onShow() {
			this.tuokeuserinfo=uni.getStorageSync('tuokeuserinfo')
			this.islogin()
			this.huoqudizhi()
		},
		methods: {
			// 保存地址
			baocundizhi(){
				if(!this.shengshiqu || !this.dizhi || !this.lianxiren){
					uni.showToast({
						title: '请完善资料后再提交!',
						icon: 'none'
					})
					return
				}
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.shoujihao)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						mask: true
					})
					return
				}
				if(this.shu1=='修改'){
					uniCloud.callFunction({
						name:"delpic",
						data:{
							leixing:17,//修改我的地址
							_id:this.dizhi_id,
							id:this.tuokeuserinfo._id,//登陆人的ID
							sheng:this.sheng,
							shi:this.shi,
							qu:this.qu,
							dizhi:this.dizhi,
							lianxiren:this.lianxiren,
							shoujihao:this.shoujihao
						}
					}).then(res=>{
						uni.showToast({
							title: '修改成功!',
							icon: 'none'
						})
						this.sheng=this.shi=this.qu=this.shengshiqu=this.dizhi=this.lianxiren=this.shoujihao=''
						this.show1=false
						this.huoqudizhi()
					})
				}else{
					uniCloud.callFunction({
						name:"delpic",
						data:{
							leixing:15,//保存我的地址
							id:this.tuokeuserinfo._id,//登陆人的ID
							sheng:this.sheng,
							shi:this.shi,
							qu:this.qu,
							dizhi:this.dizhi,
							lianxiren:this.lianxiren,
							shoujihao:this.shoujihao
						}
					}).then(res=>{
						uni.showToast({
							title: '保存成功!',
							icon: 'none'
						})
						this.show1=false
						this.sheng=this.shi=this.qu=this.shengshiqu=this.dizhi=this.lianxiren=this.shoujihao=''
						this.huoqudizhi()
					})
				}
			},
			// 选择省市区
			change(result) {
				this.sheng = result.data[0].name
				this.shi = result.data[1].name
				this.qu =  result.data[2].name
				// 将最后的省市区给到shengshiqu,显示到前端
				this.shengshiqu = ''; 
				result.data.forEach( (item,index) =>{ 
					if(index===0){ 
						this.shengshiqu += item.name 
					}else{ 
						this.shengshiqu += '-' +item.name 
					} 
				}) ; 
				// let arr =this.shengshiqu.split('-'); 
				// this.address = arr[0] + "-"+ arr[1]+"-"+arr[2];				
				
				},
			//判断有没缓存看是否自动登陆
			islogin(){
				if(!this.tuokeuserinfo._id){
					uni.navigateTo({
						url: '/pages/denglu/denglu'
					})
				}else{
					
				}
			},
			// 获取我的所有地址
			huoqudizhi(){
				uniCloud.callFunction({
					name:"delpic",
					data:{
						leixing:14,//获取我的地址
						id:this.tuokeuserinfo._id,//登陆人的ID
					}
				}).then(res=>{
					this.dizhilist=res.result.res.data
				})
			},
			goaddress() {
				this.show1=true
				this.shu1='新增'
				this.lianxiren=this.shoujihao=this.sheng=this.shi=this.qu=this.dizhi=''
				this.shengshiqu='请选择地址'
			},
			addresslist() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				addresslist().then(res => {
					this.list = res.data.data;
				})
			},
			addressremove(e) {
				uniCloud.callFunction({
					name:"delpic",
					data:{
						leixing:16,//删除本条地址
						_id:e._id
					}
				}).then(res=>{
					this.huoqudizhi()
				})
			},
			edit(e) {
				this.shu1='修改'
				this.show1=true
				this.lianxiren=e.lianxiren
				this.shoujihao=e.shoujihao
				this.shengshiqu=e.sheng+'-'+e.shi+'-'+e.qu
				this.dizhi=e.dizhi
				this.sheng=e.sheng
				this.shi=e.shi
				this.qu=e.qu
				this.dizhi_id=e._id
			},
			xuandizhi(item) {
				if (this.options.addStatus) { //确认订单过来的值为1，选择地址
				console.log(item)
					uni.setStorageSync('addrId',item)
					uni.redirectTo({
						url: '/pages/confirm/confirm'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background: linear-gradient(#d4d8dd,#e2e9f3);
		height: 100vh;
		// height: 100vh;
		// overflow-y: scroll;
	}

	.box {
		width: 90%;
		// background: #f8f8f8;
		border-radius: 35rpx;
		margin: 30rpx 0 80rpx 0;

		.list {
			// background-color: white;
			padding: 30rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
			display: flex;
			align-items: center;

			.info {
				width: calc(100% - 100rpx - 20rpx);
				padding: 0 20rpx 0 0;

				.address {
					margin-top: 10rpx;
					font-size: 28rpx;
				}

				.info1 {
					display: flex;
					align-items: center;

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.mobile {
						color: #adadad;
						margin-left: 40rpx;
						font-size: 26rpx;
					}
				}
			}

			.caozuo {
				width: 100rpx;
				text-align: right;
				border-left: 1rpx solid #f6f6f6;

				>view {
					color: #adadad;
					font-size: 28rpx;
					margin: 0 0 20rpx 0;
				}

				>navigator {
					color: #adadad;
					font-size: 28rpx;
					margin: 0 0 20rpx 0;
				}
			}
		}
	}
</style>
